<!--子组件-->
<script setup lang="ts">
// 接收父组件传进的值
// js写法
/*const props = defineProps({
  title: {
    type: String,
    default: "默认值"
  }
})
console.log(props.title)*/
// ts写法
// withDefaults设置默认值

const props = withDefaults(defineProps<{
  title: string,
  arr: number[]
}>(), {
  arr: () => [12, 23, 45]
})

// 给父组件传值
// defineEmits 定义发送事件
const emit = defineEmits<{
  (e: "on--click", name: string): void
}>();
const send = () => {
  emit('on--click', '这是子组件要传的内容')
}
// 给父组件暴露方法
const DoSomeThing = () => {
  console.log('这是子组件的方法');
}
defineExpose({
  name: 'liu',
  DoSomeThing

})
</script>

<template>
  <div style="background-color: #535bf2;width: 80%;margin: 0 auto">
    <div>子级</div>
    <div>由父级传进来的值为：{{ title }},{{ arr }}</div>
    <button @click="send">给父组件传值</button>
  </div>
</template>

<style scoped lang="scss">

</style>